import React, { useRef, useState } from "react";
import { useGLTF } from "@react-three/drei";
import { GroupProps, useLoader, useThree } from "@react-three/fiber";
import { EffectComposer, Outline, Select, Selection } from "@react-three/postprocessing";
import { GLTFLoader } from 'three-stdlib';
import { Material, Mesh } from "three";
import { KernelSize } from "postprocessing";



export function ChooseParts(props: GroupProps & { src: string, selectedParts: string[], outlineColor: number }) {
    // const { scene } = useLoader(GLTFLoader, props.src)

    // const meshes = scene.children

    // const selectedParts: string[] = props.selectedParts


    // const content = meshes.map((e: Mesh) => {
    //     const [choosed, setChoose] = useState(false)
    //     if (choosed) {
    //         if (selectedParts.indexOf(e.name) == -1)
    //             selectedParts.push(e.name)
    //     }
    //     else {
    //         if (selectedParts.indexOf(e.name) != -1)
    //             selectedParts.splice(selectedParts.indexOf(e.name), 1)
    //     }
    //     return (
    //         <Select key={e.name} enabled={choosed}>
    //             <mesh geometry={e.geometry} material={e.material} onClick={(e) => { e.stopPropagation(); setChoose(!choosed) }} />
    //         </Select >
    //     )

    // })
    return (
        <></>
    );
}


useGLTF.preload("/assets/su57_anim.glb");
